<template>
    <div>
        <van-nav-bar
		:title='title'
		left-arrow
		@click-left="onClickLeft"
		/>
        <div style="margin-top: 70px;margin-left: 20px;" v-show="title == '生前相册'">
            <!-- <img :src="item" v-for="item in img0" :key="item"/> -->
            <van-uploader :after-read="onRead" v-show="pic0Data.length <= 9">
                <van-icon name="photograph" />
            </van-uploader>
            <div v-for="(item, index) in pic0Data" :key="index">
                <img :src="item"/>
                <van-button @click="delete0(index)">删除</van-button>
            </div>
             <van-button size="large" @click="save0">保存</van-button>
        </div>
       <div style="margin-top: 70px;margin-left: 20px;" v-show="title == '吊唁影集'">
            <!-- <img :src="item" v-for="item in img0" :key="item"/> -->
            <van-uploader :after-read="onRead1" v-show="pic1Data.length <= 9 && diaoyan">
                <van-icon name="photograph" />
            </van-uploader>
            <div v-for="(item, index) in pic1Data" :key="index">
                <img :src="item"/>
                <van-button @click="delete1(index)">删除</van-button>
            </div>
             <van-button size="large" @click="save1">保存</van-button>
        </div>
        <div style="margin-top: 70px;margin-left: 20px;" v-show="title == '祭奠留影'">
            <!-- <img :src="item" v-for="item in img0" :key="item"/> -->
            <van-uploader :after-read="onRead2" v-show="pic2Data.length <= 9 && jidian">
                <van-icon name="photograph" />
            </van-uploader>
            <div v-for="(item, index) in pic2Data" :key="index">
                <img :src="item"/>
                <van-button @click="delete2(index)">删除</van-button>
            </div>
             <van-button size="large" @click="save2">保存</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: this.$route.query.title,
            dialogImageUrl: '',
            dialogVisible: false,
            type: '',
            mid: '',
            birthPic: '',
            pic0Data: [],
            pic1Data: [],
            pic2Data: [],
            count: 0,
            jidian: true,
            diaoyan: true
        }
    },
    created () {
        let item = JSON.parse(window.localStorage.getItem('item'))
        this.mid = item.id
        this.title == '生前相册' ? this.type = 0 : this.title == '吊唁影集' ? this.type = 1 : this.type = 2
        if (this.title == '生前相册') {
            this.$toast('当前您可以选择十张以内的照片进行上传')
        } else if (this.title == '吊唁影集') {
            if (item.memorialtype == 0) {
                this.$toast('您当前是免费馆，升级馆后，可上传影集')
                this.diaoyan = false
            } else if (item.memorialtype == 1) {
                this.$toast('当前您可以选择二十张以内的照片进行上传')
            } else if (item.memorialtype == 2) {
                this.$toast('当前您可以选择五十张以内的照片进行上传')
            } else if (item.memorialtype == 3) {
                this.$toast('当前您可以选择一百张以内的照片进行上传')
            }
        } else {
            if (item.memorialtype == 0) {
                this.$toast('您当前是免费馆，升级馆后，可上传影集')
                this.jidian = false
            } else if (item.memorialtype == 1) {
                this.$toast('当前您可以选择十张以内的照片进行上传')
            } else if (item.memorialtype == 2) {
                this.$toast('当前您可以选择二十张以内的照片进行上传')
            } else if (item.memorialtype == 3) {
                this.$toast('当前您可以选择五十张以内的照片进行上传')
            }
        }
        this.getData()
    },
    methods: {
        save0 () {
            var that = this
            this.$axios.get("/huainianwang/picInfo/app/savePic?mid="+this.mid+"&pictype="+this.type+"&picurl="+this.pic0Data+"")
            .then(function(res){
                that.getData()
                that.pic0Data = []
                that.$toast('保存成功')
            },function(err){
            }).catch(function(error){
            });   
        },
        save1 () {
            var that = this
            this.$axios.get("/huainianwang/picInfo/app/savePic?mid="+this.mid+"&pictype="+this.type+"&picurl="+this.pic1Data+"")
            .then(function(res){
                that.getData()
                that.pic1Data = []
                that.$toast('保存成功')
            },function(err){
            }).catch(function(error){
            });   
        },
        save2 () {
            var that = this
            this.$axios.get("/huainianwang/picInfo/app/savePic?mid="+this.mid+"&pictype="+this.type+"&picurl="+this.pic2Data+"")
            .then(function(res){
                that.getData()
                that.pic2Data = []
                that.$toast('保存成功')
            },function(err){
            }).catch(function(error){
            });   
        },
        delete0 (index) {
            // console.log(2)
           this.pic0Data.splice(index, 1)
        //    console.log(s.pic0Data)
            this.$toast('删除成功，请记得保存此处更改')
        },
        delete1 (index) {
            // console.log(2)
           this.pic1Data.splice(index, 1)
        //    console.log(s.pic0Data)
            this.$toast('删除成功，请记得保存此处更改')
        },
        delete2 (index) {
            // console.log(2)
           this.pic2Data.splice(index, 1)
        //    console.log(s.pic0Data)
            this.$toast('删除成功，请记得保存此处更改')
        },
        onRead (file) {
			const that=this;
			let name = "生前相册" + this.mid + this.count
			this.$axios.post("/huainianwang/picInfo/app/upLoadJpg?", {
				url: file.content,
				name: name
			}).then(function(res){
                that.pic0Data.push(res.data.object)
			},function(err){
			}).catch(function(error){
            });
            this.count ++ 
        },
        onRead1 (file) {
			const that=this;
			let name = "吊唁图片" + this.mid + this.count
			this.$axios.post("/huainianwang/picInfo/app/upLoadJpg?", {
				url: file.content,
				name: name
			}).then(function(res){
                that.pic1Data.push(res.data.object)
			},function(err){
			}).catch(function(error){
            });
            this.count ++ 
        },
        onRead2 (file) {
			const that=this;
			let name = "祭奠影集" + this.mid + this.count
			this.$axios.post("/huainianwang/picInfo/app/upLoadJpg?", {
				url: file.content,
				name: name
			}).then(function(res){
                that.pic2Data.push(res.data.object)
			},function(err){
			}).catch(function(error){
            });
            this.count ++ 
		},
        getData () {
            var that = this
            this.$axios.get("/huainianwang/picInfo/app/getPicList?mid="+this.mid+"&pictype="+this.type+"")
            .then(function(res){
                
                if (that.type == 0) {
                    that.pic0Data = res.data.object.picurl.split(',')
                } else if (that.type == 1) {
                    that.pic1Data = res.data.object.picurl.split(',')
                } else {
                    that.pic2Data = res.data.object.picurl.split(',')
                }
            },function(err){
            }).catch(function(error){
            });    
        },
        onClickLeft () {
            this.$router.go(-1)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style scoped lang="scss">
img {
    height: 100px;
    width: 80%;
}
.van-button--normal{
    padding:0;
    height: 30px;
    line-height: 30px;
    width: 50px;
    font-size: 13px;
}
</style>
